{% extends 'main/layout.html' %}

{% block title %}Соревнования{% endblock %}

{% block content %}
    <div class="competitions" style="margin-top: 40px;">
        <h2 class="h2_competitions">Соревнования</h2>
        <div class="competitions_list">
            <table class="competitions_table">
                <tbody>
                    {% for el in competitions%}
                       <tr>
                           <td>{{ el.title }}</td>
                           <td >Количество свободных мест: {{ el.places }}</td>
                           <td>{{ el.date }}</td>
                       </tr>
                    {% endfor %}
                </tbody>
            </table>

            <button id="btn-open" class="competition_btn">Участвовать</button>
        </div>


        <div id="competition-modal" class="modal">
        <div class="modal_box">
            <span class="close" id="close-modal">&times;</span>
            <h2 style="color: rgba(146, 160, 161, 1);">ФИО преподавателя</h2>
            <div class="modal-content">
                <div class="form-group">
                    <label for="competition">Соревнование</label>
                    <select id="competition">
                        <option value="python">Основы Python</option>
                        <option value="html">Основы Вёрстки</option>
                        <option value="csharp">Основы C#</option>
                        <option value="cpp">Основы C++</option>
                    </select>
                </div>

                <div id="students-container">
                    <div class="form-group student-entry">
                        <input type="text" placeholder="ФИО студента">
                        <input type="email" placeholder="Эл. почта">
                        <span class="remove-student">&times;</span>
                    </div>
                </div>

                <div class="form-group add-student" id="add-student">
                    <span>+</span>
                    <span style="color: rgba(146, 160, 161, 1);">Добавить ученика</span>
                </div>

                <button id="participate-button">Участвовать</button>
            </div>
        </div>
    </div>
    </div>

    <script>
       // Открытие модального окна
document.getElementById("btn-open").addEventListener("click", function() {
    document.getElementById("competition-modal").style.display = "flex";
});

// Закрытие модального окна
document.getElementById("close-modal").addEventListener("click", function() {
    closeModal();
});

// Закрытие модального окна при нажатии на клавишу "Esc"
document.addEventListener("keydown", function(event) {
    if (event.key === "Escape") {
        closeModal();
    }
});

// Закрытие модального окна при клике вне его
document.addEventListener("click", function(event) {
    var modal = document.getElementById("competition-modal");
    if (event.target === modal) {
        closeModal();
    }
});

function closeModal() {
    document.getElementById("competition-modal").style.display = "none";
    resetForm();
}

// Сброс формы
function resetForm() {
    var container = document.getElementById("students-container");
    container.innerHTML = `
        <div class="form-group student-entry">
            <input type="text" placeholder="ФИО студента">
            <input type="email" placeholder="Эл. почта">
            <span class="remove-student">&times;</span>
        </div>
    `;

    // Переназначить слушатель для удаления студента
    document.querySelectorAll(".remove-student").forEach(function(removeButton) {
        removeButton.addEventListener("click", function() {
            container.removeChild(this.parentElement);
        });
    });
}

// Добавление нового блока для ввода данных ученика
document.getElementById("add-student").addEventListener("click", function() {
    var container = document.getElementById("students-container");
    var studentEntry = document.createElement("div");
    studentEntry.className = "form-group student-entry";
    studentEntry.innerHTML = '<input type="text" placeholder="ФИО студента"><input type="email" placeholder="Эл. почта"><span class="remove-student">&times;</span>';
    container.appendChild(studentEntry);

    // Удаление блока для ввода данных ученика
    studentEntry.querySelector(".remove-student").addEventListener("click", function() {
        container.removeChild(studentEntry);
    });
});

// Удаление блока для ввода данных ученика
document.querySelectorAll(".remove-student").forEach(function(removeButton) {
    removeButton.addEventListener("click", function() {
        var container = document.getElementById("students-container");
        container.removeChild(this.parentElement);
    });
});
    </script>
{% endblock %}